Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Catapult as an alternative embedded query trace visualizer #1909

Closed
wants to merge 9 commits into from

Conversation

s7tya
Copy link
Contributor

@s7tya s7tya commented May 22, 2024

closes #1857

We are currently using Perfetto as our query trace visualizer. However, it would be beneficial to have a visualizer integrated directly into rust-lang.org.

In this PR, I have added the following:

  • An endpoint that returns standalone visualizer HTML generated by Catapult's trace2html.
    • It's just using tokio::process::Command to call python3 trace2html (tempfile).json -o (tempfile).html.
  • A component that displays the visualizer, which has been added to the compare details page.
  • A link to the Catapult's HTML next to the current query tracer.

@s7tya s7tya marked this pull request as draft May 22, 2024 07:29
@Kobzol
Copy link
Contributor

Kobzol commented May 22, 2024

In general, the approach looks good! It would be nice to avoid this Python script invocation though, of course 😅 Maybe we will need to have something like it, but I would like to investigate alternatives first.

Could you try to take a look if this could work? By embedding the HTML page within our frontend, and then passing it data through JavaScript.

@Kobzol
Copy link
Contributor

Kobzol commented May 22, 2024

Another alternatives could be:

@s7tya
Copy link
Contributor Author

s7tya commented May 22, 2024

Could you try to take a look if this could work? By embedding the HTML page within our frontend, and then passing it data through JavaScript.

Alright! I'll give it a try.

Another alternatives could be:

Try to embed https://github.com/firefox-devtools/profiler (which can also compare the traces apparently, which would be super useful.
Try to embed https://github.com/google/perfetto
Write our own visualizer 😆

I've compared some open-source visualizers, so I'll share them on Zulip or somewhere else. The Firefox profiler is definitely a good option.

However, there’s no official way to embed Perfetto. The Perfetto team has declined requests for a "trace2html" alternative due to security concerns, maintenance costs, and other reasons. So, it might be best to avoid that option.

@LalitMaganti
Copy link

LalitMaganti commented Aug 8, 2024

However, there’s no official way to embed Perfetto. The Perfetto team has declined requests for a "trace2html" alternative due to security concerns, maintenance costs, and other reasons. So, it might be best to avoid that option.

This is not true. Perfetto is embedded by other tools just fine (e.g. Flutter devtools profiler: flutter/devtools#5142, flutter/devtools#4207)

@Kobzol
Copy link
Contributor

Kobzol commented Aug 8, 2024

Hi, thanks a lot for that link! I suppose that originally, we meant something more granular under the term "embedding", rather than taking a precompiled HTML and putting it inside an iframe. However, if this approach works for others, we could definitely try it!

Just to make sure that I understand it correctly, if you embed Perfetto in an iframe as a precompiled HTML page, the security restrictions that are present on https://ui.perfetto.dev/ disappear, and we could give it any URL to load? (Well, I suppose that if the security restrictions are there, we could still fork it and remove them..).

@LalitMaganti
Copy link

rather than taking a precompiled HTML and putting it inside an iframe.

The HTML of the Perfetto UI is very thin if you see our index.html :) Almost everything is JS + communicating via postMessage to control what we are displaying.

Just to make sure that I understand it correctly, if you embed Perfetto in an iframe as a precompiled HTML page, the security restrictions that are present on https://ui.perfetto.dev/ disappear, and we could give it any URL to load?

The security restrictions on URLs come from the Content-Security-Policy, if you control the HTTP headers/top level HTML, you have control over setting that to whatever you want without any forking.

@s7tya
Copy link
Contributor Author

s7tya commented Sep 7, 2024

I think #1967 is much better way so I'll close this

@s7tya s7tya closed this Sep 7, 2024
@s7tya s7tya deleted the feat/add-catapult branch October 11, 2024 12:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Embed query traces in the web UI
3 participants